<template>
  <div class="mask">
    <div class="con">
      <p>新增人员</p>
      <button class="bb" @click="xiaoshi">X</button>
      <div>
        <a-steps :current="current">
          <a-step v-for="item in steps" :key="item" :title="item" />
        </a-steps>
        <from class="steps-content">
          <Floone ref="FlooneRef" v-show="current == 0"></Floone>
          <Flotow ref="FlotowRef" v-show="current == 1"></Flotow>
          <Flothree ref="FlothreeRef" v-show="current == 2"></Flothree>
        </from>
        <div class="steps-action">
          <a-button
            v-if="current < steps.length - 1"
            type="primary"
            @click="next"
            >下一步</a-button
          >
          <a-button
            v-if="current == steps.length - 1"
            type="primary"
            @click="baocun"
          >
            保存
          </a-button>
          <a-button v-if="current > 0" style="margin-left: 8px" @click="prev"
            >上一步</a-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineComponent, ref, defineEmits } from "vue";
import { message } from "ant-design-vue";
import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";
import Floone from "./addflower.vue";
import Flotow from "./addflotow.vue";
import Flothree from "./addthree.vue";
import service from "../../../utils/service";
const steps = ["工作信息", "身份信息", "人脸信息"];
const current = ref<number>(0);
const emit = defineEmits<{
  (e: "xxx"): void;
  (e: "bbb"): void;
}>();
const next = () => {
  current.value++;
};
const prev = () => {
  current.value--;
};
function xiaoshi() {
  emit("xxx");
}
//获取数据
const FlooneRef = ref(null);
const FlotowRef = ref(null);
const FlothreeRef = ref(null);
const baocun = () => {
  let form: any = FlooneRef.value.form;
  let formes = FlotowRef.value.formes;
  let newfrom = JSON.parse(JSON.stringify(form));
  let newfromes = JSON.parse(JSON.stringify(formes));
  let data = { ...newfrom, ...newfromes };

  if (
    form.name &&
    form.phone &&
    form.item &&
    form.contractor &&
    form.teams &&
    form.professionalType &&
    form.gangwei &&
    formes.idNumber
  ) {
    xiaoshi();
    service({
      url: "flower",
      method: "post",
      data: data,
    }).then((res) => {
      emit("bbb");
    });
  } else {
    ElMessage({
      message: "请填写必输项哦",
      type: "warning",
    });
  }
};
</script>
<style scoped>
.mask {
  /* 遮罩层的写法 */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 500px;
  text-align: center;
  padding-top: 80px;
}

.steps-action {
  margin-top: 420px;
  margin-left: 10px;
}

[data-theme="dark"] .steps-content {
  background-color: #2f2f2f;
  border: 1px dashed #404040;
}
.con {
  position: fixed;
  top: 100px;
  left: 400px;
  width: 840px;
  height: 560px;
  background-color: rgb(228, 231, 233);
  z-index: 100;
}
.bb {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0px;
  left: 820px;
  /* background-color: chocolate; */
  border: none;
  font-size: 20px;
}
p {
  font-size: 20px;
  font-weight: bold;
}
</style>